/* eslint-disable @typescript-eslint/no-unused-vars */
import type { CSSProperties } from 'react';
import { create, type StateCreator } from 'zustand';
import { persist } from 'zustand/middleware'
//保存全局组件json ‼️

// 组件接口定义
export interface Component {
  id: number;                // 组件唯一标识符
  name: string;              // 组件名称
  props: any;                // 组件属性（eslint禁止使用any类型，有问题）
  styles?:CSSProperties,     //组件设置样式（可更新）
  desc: string;             // 组件描述
  children?: Component[];    // 子组件列表（可选）
  parentId?: number;         // 父组件ID（可选）
}

// 状态接口定义
interface State {
  components: Component[];   // 存储所有组件的数组
  mode: 'edit' | 'preview';       //预览模式和编辑模式
  //click点击选中的组件（右侧编辑栏也要显示）
  curComponentId: number | null;
  curComponent: Component | null;
}

// 操作接口定义
interface Action {
  addComponent: (component: Component, parentId?: number) => void;      // 添加
  deleteComponent: (componentId: number) => void;                       // 删除
  updateComponentProps: (componentId: number, props: any) => void;      // 更新
  setCurComponentId: (componentId: number | null) => void;              // 设置click的componentId
  updateComponentStyles: (componentId: number, styles: CSSProperties, repalce?: boolean) => void;  //可在右侧编辑栏更新组件样式
  setMode: (mode: State['mode']) => void;                               //切换预览/编辑模式
}

// 创建组件状态管理存储
const creator: StateCreator<State & Action>=(
  ((set, get) => ({
    // 初始组件列表，默认包含一个Page组件
    components: [
      {
        id: 1,
        name: 'Page',
        props: {},
        desc: '页面',
      }
    ],
    curComponentId: null,
    curComponent: null,
    mode: 'edit',//刚开始默认编辑模式
    setMode: (mode) => set({mode}),
    //click组件，更改组件的属性
    setCurComponentId: (componentId) =>
      set((state) => ({
        curComponentId: componentId,
        curComponent: getComponentById(componentId, state.components),
      })),
    // 添加组件方法
    addComponent: (component, parentId) =>
      set((state) => {
        if (parentId) {
          // 如果指定了父组件ID，则将新组件添加为其子组件
          const parentComponent = getComponentById(
            parentId,
            state.components
          );

          if (parentComponent) {
            if (parentComponent.children) {
              // 如果父组件已有子组件，则添加到子组件列表中
              parentComponent.children.push(component);
            } else {
              // 如果父组件没有子组件，则创建子组件列表
              parentComponent.children = [component];
            }
          }

          // 设置新组件的父组件ID
          component.parentId = parentId;
          return {components: [...state.components]};
        }
        // 如果没有指定父组件ID，则添加到顶层组件列表
        return {components: [...state.components, component]};
      }),
    // 删除组件方法
    deleteComponent: (componentId) => {
      if (!componentId) return;

      // 查找要删除的组件
      const component = getComponentById(componentId, get().components);
      if (component?.parentId) {
        // 如果组件有父组件，则从父组件的子组件列表中移除
        const parentComponent = getComponentById(
          component.parentId,
          get().components
        );

        if (parentComponent) {
          parentComponent.children = parentComponent?.children?.filter(
            (item) => item.id !== +componentId
          );

          set({components: [...get().components]});
        }
      } else {
        // 如果是顶层组件，直接从组件列表中移除
        set({
          components: get().components.filter(item => item.id !== componentId)
        });
      }
    },
    // 更新组件属性方法
    updateComponentProps: (componentId, props) => {
      const component = getComponentById(componentId, get().components);
      if (component) {
        component.props = { ...component.props, ...props };
        set({ components: [...get().components] });
      }
    },
    // 更新组件样式方法
    updateComponentStyles: (componentId, styles, replace) => {
      console.log(styles)
      set((state) => {
        const component = getComponentById(componentId, state.components);
        if (component) {
          // component.styles = { ...component.styles, ...styles };
          component.styles = replace ? {...styles} : {...component.styles, ...styles};

  
          return { components: [...state.components] };
        }
  
        return { components: [...state.components] };
      })
    }
  }))
);

export const useComponetsStore = create<State & Action>()(persist(creator, {
  name: 'components-storage',
  partialize: (state) => ({
    components: state.components,
    mode: state.mode
    // 不存储 curComponentId 和 curComponent
  })
}));

// 根据ID查找组件的辅助函数
export function getComponentById(id: number | null, components: Component[]): Component | null {
    if (!id) return null;
  
    // 递归查找组件
    for (const component of components) {
      if (component.id == id) return component;
      if (component.children && component.children.length > 0) {
        // 在子组件中递归查找
        const result = getComponentById(id, component.children);
        if (result !== null) return result;
      }
    }
    return null;
}
